<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../include.jsp"%>
<div class="site-text">
    <button class="layui-btn layui-btn-normal action" data-op="in" data-link="/student/ticket/in/${courses.id }">签到</button>
    <button class="layui-btn " onclick="geolocation.getLocation(showPosition, showErr, options);">定位</button>
    <button class="layui-btn layui-btn-danger action" data-op="out" data-link="/student/ticket/out/${courses.id }">签退</button>
    <a class="layui-btn layui-btn-warm" href="/common/student/logout/${courses.id }/${courses.teacherId }">退出</a>
    
</div>
<blockquote class="layui-elem-quote" id="address">暂时无法获取您的位置，请检查定位相关权限</blockquote>
<table class="layui-table">
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tbody>
    <tr>
      <th>课程名称</th>
      <td>${courses.name }</td>
    </tr>
    <tr>
     <th>课程时间</th>
     <td><fmt:formatDate value="${courses.beginTime }" pattern="yyyy-MM-dd  HH:mm:ss"/></td>
    </tr>
    <tr>
      <th>课程教师</th>
      <td>${courses.teacherName }</td>
    </tr>
    <tr>
     <th>课程说明</th>
     <td>${courses.description }</td>
    </tr>
  </tbody>
</table>
<script>
	var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");
	geolocation.getLocation(showPosition, showErr, options);
	var pos = {} ;
	var options = {
		timeout: 8000
	};

	function showPosition(position) {
		pos = position;
		console.debug(pos) ;
		document.getElementById("address").innerHTML = "您当前所在的位置为："+ (position.addr || position.city) ;
	};

	function showErr() {
		document.getElementById("address").innerHTML = "定位失败，请查看定位相关权限然后尝试重新定位";
		 return ;
	};
	layui.use(['form','element'], function() {
		
		var form = layui.form(),
		$ = layui.jquery,
		element = layui.element();
		
		
		doPost = function(url){
			var tmpIndex = layer.load({shade: [0.8, '#393D49']});
			$.post(url,  pos ,function(rst){
		    	console.debug(rst);
		    	layer.close(tmpIndex);
		    	if(!rst){
		    		layer.msg('网络连接错误，请稍后再试。。。', {
		    			icon: 2,
		    			shade: [0.8, '#393D49'],
	    			  	anim: 6
	    			});
		    		return ;
		    	}
		    	
		    	if('error' == rst.code){
		    		layer.msg(rst.message, {
		    			time:2000,
		    			icon: 2,
		    			shade: [0.8, '#393D49'],
	    			  	anim: 6
	    			});
		    		return ;
		    	}
		    	
		    	layer.msg(rst.message, {
	    			time:2000,
	    			icon: 6,
	    			shade: [0.8, '#393D49'],
    			  	anim: 6
    			});
		    },'json');
		}
		//监听提交
		$('.action').on('click', function() {
			console.debug(pos) ;
			console.debug(JSON.stringify(pos)) ;
			var url = $(this).attr('data-link');
			var op = $(this).attr("data-op");
			if("out" == op){
				layer.confirm('请确认已经到了签退时间再进行签退哦,继续签退?', {icon: 3, title:'提示'}, function(index){
					layer.close(index);
					doPost(url) ;
				});
			}else{
				doPost(url) ;
			}
		
			return false;
		});
		
	});
</script>